<script setup lang="ts">
// 搜索页面
import { ref } from 'vue'
import { onMounted } from '@vue/runtime-core'
import { ElRow, ElCol, ElCard, ElImage, ElInput, ElButton, ElSkeleton, ElEmpty } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 视频数据结构定义
interface Video {
  id: number
  title: string
  cover: string
  duration: string
  views: string
  author: string
  publishTime: string
}

// 搜索相关数据
const searchKeyword = ref('')
const searchResults = ref<Video[]>([])
const loading = ref(false)
const hasSearched = ref(false)

// 模拟搜索功能
const performSearch = () => {
  if (!searchKeyword.value.trim()) return
  
  loading.value = true
  hasSearched.value = true
  
  // 模拟API调用延迟
  setTimeout(() => {
    searchResults.value = [
      {
        id: 101,
        title: `Vue 3实战教程 - ${searchKeyword.value}入门到精通`,
        cover: 'https://picsum.photos/300/200?random=101',
        duration: '1:25:30',
        views: '12.8万',
        author: '前端小智',
        publishTime: '2天前'
      },
      {
        id: 102,
        title: `Element Plus组件详解 - ${searchKeyword.value}应用`,
        cover: 'https://picsum.photos/300/200?random=102',
        duration: '45:20',
        views: '8.5万',
        author: 'UI设计师',
        publishTime: '1周前'
      },
      {
        id: 103,
        title: `Pinia状态管理实战 - ${searchKeyword.value}状态管理`,
        cover: 'https://picsum.photos/300/200?random=103',
        duration: '38:45',
        views: '6.3万',
        author: '状态管理师',
        publishTime: '2周前'
      },
      {
        id: 104,
        title: `Vue Router 4深度解析 - ${searchKeyword.value}路由`,
        cover: 'https://picsum.photos/300/200?random=104',
        duration: '52:10',
        views: '9.7万',
        author: '路由专家',
        publishTime: '3周前'
      }
    ]
    loading.value = false
  }, 800)
}

// 热门搜索关键词
const hotKeywords = ref([
  'Vue 3',
  'Element Plus',
  'Pinia',
  'TypeScript',
  'Vue Router',
  '组件库',
  '前端框架',
  '状态管理'
])

// 点击热门关键词
const selectHotKeyword = (keyword: string) => {
  searchKeyword.value = keyword
  performSearch()
}

onMounted(() => {
  // 可以在这里加载热门搜索词等数据
})
</script>

<template>
  <div class="search-container">
    <h1 class="page-title">视频搜索</h1>
    
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入视频关键词"
        size="large"
        class="search-input"
        @keyup.enter="performSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="performSearch" :loading="loading">
            {{ loading ? '搜索中...' : '搜索' }}
          </el-button>
        </template>
      </el-input>
    </div>
    
    <!-- 热门搜索 -->
    <div v-if="!hasSearched" class="hot-search">
      <h3>热门搜索</h3>
      <div class="hot-keywords">
        <el-tag 
          v-for="(keyword, index) in hotKeywords" 
          :key="index" 
          class="hot-keyword-tag"
          @click="selectHotKeyword(keyword)"
        >
          {{ keyword }}
        </el-tag>
      </div>
    </div>
    
    <!-- 搜索结果 -->
    <div v-if="hasSearched" class="search-results">
      <div class="result-header">
        <h3>搜索结果</h3>
        <span class="result-count">共找到 {{ searchResults.length }} 个视频</span>
      </div>
      
      <!-- 结果为空 -->
      <el-empty v-if="!loading && searchResults.length === 0" description="暂无相关视频" />
      
      <!-- 结果列表 -->
      <el-row :gutter="20" class="video-grid">
        <el-col 
          v-for="video in searchResults" 
          :key="video.id" 
          :xs="24" :sm="12" :md="8" :lg="6" 
          class="video-item"
        >
          <el-card 
            shadow="hover" 
            class="video-card"
            @click="$router.push(`/video/${video.id}`)"
          >
            <div class="video-cover">
              <el-image 
                :src="video.cover" 
                class="cover-image"
                fit="cover"
                :alt="video.title"
              >
                <template #placeholder>
                  <el-skeleton-item variant="image" class="image-skeleton" />
                </template>
                <template #error>
                  <div class="image-error">加载失败</div>
                </template>
              </el-image>
              <div class="video-duration">{{ video.duration }}</div>
            </div>
            <div class="video-info">
              <h3 class="video-title" :title="video.title">{{ video.title }}</h3>
              <p class="video-author">{{ video.author }}</p>
              <div class="video-meta">
                <span class="video-views">{{ video.views }} 次观看</span>
                <span class="video-time">{{ video.publishTime }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 加载状态 -->
        <el-col 
          v-for="n in 4" 
          v-if="loading" 
          :key="n" 
          :xs="24" :sm="12" :md="8" :lg="6" 
          class="video-item"
        >
          <el-card shadow="hover" class="video-card">
            <el-skeleton animated>
              <template #template>
                <el-skeleton-item variant="image" class="skeleton-cover" />
                <div style="padding: 14px">
                  <el-skeleton-item variant="h3" style="width: 80%" />
                  <div>
                    <el-skeleton-item variant="text" style="margin-right: 16px" />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.search-container {
  padding: 20px;
}

.page-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.search-box {
  margin-bottom: 30px;
}

.search-input {
  max-width: 600px;
}

.hot-search h3,
.result-header h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.result-count {
  color: #909399;
  font-size: 14px;
}

.hot-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hot-keyword-tag {
  cursor: pointer;
}

.hot-keyword-tag:hover {
  opacity: 0.8;
}

.video-grid {
  margin-top: 20px;
}

.video-item {
  margin-bottom: 20px;
}

.video-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-cover {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 4px;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.image-skeleton {
  width: 100%;
  height: 100%;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
}

.video-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 12px;
}

.video-info {
  padding: 10px 0;
}

.video-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-author {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: #909399;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.skeleton-cover {
  width: 100%;
  height: 150px;
}
</style>